import { MenuButton } from "@/components/Header/MenuButton.tsx";
import { Dropdown, InputNumber, theme } from "antd";
import React, { useEffect, useState } from "react";
import { Pen, PenType } from "@meta2d/core";

const { useToken } = theme;
function Size({ size }: { size: number }) {
  return <span style={{ lineHeight: "16px" }}>{size}</span>;
}
export const LineWidth = () => {
  const { token } = useToken();

  const [width, setWidth] = useState<number>(1);

  const contentStyle: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    borderRadius: token.borderRadiusLG,
    boxShadow: token.boxShadowSecondary,
  };
  const onChange = (value: any) => {
    setWidth(value);
    window.meta2d.store.data.lineWidth = value;
    // 活动层的箭头都变化
    if (window.meta2d.store.active != undefined) {
      window.meta2d.store.active.forEach((pen: Pen) => {
        if (pen.type === PenType.Line) {
          window.meta2d.setValue(
            {
              id: pen.id,
              lineWidth: value,
            },
            {
              render: false,
            },
          );
        }
      });
      window.meta2d.render();
    }
  };
  useEffect(() => {
    let value = window.meta2d?.store?.data?.lineWidth || 1;
    setWidth(value);
  }, []);
  return (
    <Dropdown
      arrow
      dropdownRender={() => (
        <div style={contentStyle}>
          <InputNumber min={1} autoFocus value={width} onChange={onChange} />
        </div>
      )}
    >
      <a onClick={(e) => e.preventDefault()}>
        <MenuButton
          arrow
          title="线宽"
          children={<Size size={width} />}
        ></MenuButton>
      </a>
    </Dropdown>
  );
};
